<template>
    <el-dialog :modal="true" :close-on-click-modal="false" v-model="registerDrawer" style="width: 30%; position: relative;" :title= "'快速注册'" top="25vh">
        <el-row class="login-page">
            <el-col class="form">
            <!-- 注册相关表单 -->
                <el-form
                    :model="formModel"
                    :rules="rules"
                    ref="form"
                    size="large"
                    autocomplete="off" label-width="auto" style="max-width: 600px"
                >
                    <!-- <el-form-item>
                    <h1>快速注册</h1>
                    </el-form-item> -->
                    <el-form-item prop="username" label="用户名">
                    <el-input
                        v-model="formModel.username"
                        :prefix-icon="User"
                        placeholder="请输入用户名"
                    ></el-input>
                    </el-form-item>

                    <el-form-item prop="password" label="密码">
                    <el-input
                        v-model="formModel.password"
                        :prefix-icon="Lock"
                        type="password"
                        placeholder="请输入密码"
                    ></el-input>
                    </el-form-item>

                    <el-form-item prop="repassword" label="二次密码">
                    <el-input
                        v-model="formModel.repassword"
                        :prefix-icon="Lock"
                        type="password"
                        placeholder="请输入再次密码"
                    ></el-input>
                    </el-form-item>
                    
                    <el-form-item class="flex">
                        <el-button @click="register" type="primary">
                            注册
                        </el-button>
                        <el-button  type="info"  @click="registerDrawer = false" style="margin-left: 50px;">
                            返回
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-dialog>
    
</template>

<script setup>
    import {ref,watch} from 'vue'
    import {Register} from '@/api/project.js'

    //判断是否打开registerDrawer组件
    const registerDrawer = ref(false);
    // 打开or关闭registerDrawer组件
    const openRegisterDrawer = () => {
        registerDrawer.value =!registerDrawer.value ;
    };
    const formModel = ref({
    username: '',
    password: '',
    repassword: '',
    })

    const register = async () => {
  await form.value.validate()

    try {
        const params = {
            username: formModel.value.username,
            password: formModel.value.password,
            realName: '陈浩',
            gender: '男',
            email: 'hbchen@126.com'
        }
        const response = await Register(params);
        console.log('Response data111:', response); // 新增这行用于调试
        if (response.data.code === 201) {
            console.log('注册成功111111111111');
            ElMessage({
                showClose: true,
                message: '注册成功',
                type: 'success'
            });
        } 
        // else if (response && response.code === 409) {
        //     console.log('用户名已存在111');
        //     ElMessage({
        //         showClose: true,
        //         message: response.errorMsg,
        //     });
        // }
        // 注册成功后，关闭 registerDrawer 组件
        registerDrawer.value = false;
        // 重置表单
        formModel.value.username = '';
        formModel.value.password = '';
        formModel.value.repassword = '';
    } catch (error) {
        console.error('Error occurred:', error);
        // 处理错误的逻辑
    }
}


    const rules = {
        username: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
        },
        {
            // min: 5,
            // max: 10,
            //   pattern: /^\S{6,15}$/,
            // message: '用户名必须是5-10位的字符',
            trigger: 'blur'
            //   triggrt: 'chage'为实时的上面的是失焦后校验
        }
        ],
        password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
        },
        {
            // min: 6,
            // max: 15,
            // pattern: /^\S{6,15}$/,
            // message: '密码必须是6-15位的非空字符',
            trigger: 'blur'
        }
        ],
        repassword: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
        },
        {
            min: 6,
            max: 15,
            pattern: /^\S{6,15}$/,
            message: '密码必须是6-15位的非空字符',
            trigger: 'blur'
        },
        {
            // @ts-ignore
            validator: (rule, value, callback) => {
            if (value !== formModel.value.password) {
                callback(new Error('两次输入的密码不一致'))
            } else {
                callback()
            }
            },
            trigger: 'blur'
        }
        ]
    }

    const form = ref()


    watch(registerDrawer, (newVal, oldVal) => {
        console.log('清空了表单111');
        // 离开页面时，清空表单
        // initForm()
        // bufferMember.value = []
    })

    defineExpose({
        openRegisterDrawer,
    })
</script>


<style lang="scss" scoped>
.login-page {
  display: flex;
  justify-items: center;
  align-items: center;
  background-color: #fff;
  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
    .title {
      margin: 0 auto;
    }
    .flex {
        position: relative;
        left: -15%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
    }
  }
}
</style>